<template>
  <el-container class="main_con">
    <ufrom @submit="saveData" ref="ufrom">
      <!-- 
    <div class="edit_con">
      <div class="edit_title">{{ pageName }}</div>
      <div class="edit_content"> -->
      <el-form size="medium" :validate-on-rule-change="false" label-width="100px" ref="itemForm" :model="obj" :rules="itemRules" class="edit_form" style="width:100%">
        <div class="setting_body_item">
          <div class="header">{{ pageName }}</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form-item label="公告标题" prop="title"><el-input placeholder="请输入公告标题" v-model="obj.title" style="width:360px;"></el-input></el-form-item>

              <el-form-item label="排序" prop="sort"><el-input placeholder="请输入公告排序,越小越靠前,最大9999" v-model="obj.sort" style="width:360px;"></el-input></el-form-item>

              <!-- <el-form-item label="营业执照" prop="business_license">
            <Upload :tempUrl="obj.business_license" @input="getImage"></Upload>
          </el-form-item> -->

              <el-form-item label="状态">
                <el-radio-group v-model="obj.status">
                  <el-radio :label="1">显示</el-radio>
                  <el-radio :label="0">隐藏</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="展示方式">
                <el-radio-group v-model="obj.type">
                  <el-radio :label="1">内容</el-radio>
                  <el-radio :label="2">链接</el-radio>
                </el-radio-group>
                <div v-if="obj.type == 1"><tinymce v-model="detail" :height="300" /></div>
                <div v-if="obj.type == 2">
                  <el-input disabled v-model="linkdata.link" placeholder="请选择链接地址" style="width:360px;">
                    <template slot="append">
                      <span @click="selectlink">选择链接</span>
                    </template>
                  </el-input>
                </div>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </ufrom>
    <el-dialog class="selectlink" title="链接选择器" :visible.sync="drawer" destroy-on-close width="800px">
      <SelectLink ref="selectlink" :linktype="linktype" :linkdata="linkdata" @changelink="changelink"></SelectLink>
    </el-dialog>
  </el-container>
</template>

<script>
import SelectLink from '@/components/SelectLink/index';
import Tinymce from '@/components/Tinymce';

import {addNotice, editNotice, getNotice} from '@/api/shop/announcement';
export default {
  data() {
    return {
      obj: {
        title: '',
        type: 1,
        content: '',
        sort: 1,
        status: 1
      },
      detail: '',
      // link: '',
      linkdata: {
        link: ''
      },
      drawer: false,
      _obj: {},
      pageIsEdit: 0, //0->新增,1->编辑
      pageName: '',
      indate: false,
      isLoading: false,
      itemRules: {
        title: [
          {
            required: true,
            message: '请输入公告标题'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入公告排序,最大9999'
          }
        ]
        // business_license: [{
        //   required: true,
        //   trigger: 'change',
        //   message:'营业执照不能为空'
        // }],
      },
      linktype: ['1', '2', '3', '4', '5', '6', '7']
    };
  },
  components: {
    Tinymce,
    SelectLink
  },

  created() {
    //获取路由参数(编辑时使用)
    if (this.$route.query.id) {
      //编辑页面
      this.pageIsEdit = 1;
      this.pageName = '编辑公告';
      this.getItemData(this.$route.query.id);
    } else {
      this.pageIsEdit = 0;
      this.pageName = '新增公告';
      //this._obj = Object.assign({},this.obj);
    }
  },
  watch: {
    // 'obj.type':{
    //   handler:function(){
    //     this.obj.content = '';
    //   }
    // }
  },
  methods: {
    //选择链接
    selectlink() {
      this.drawer = true;
      this.$nextTick(() => {
        this.$refs.selectlink.init();
      });
    },
    changelink(data) {
      this.linkdata = data;
      this.drawer = false;
    },
    //获取编辑页面基础数据
    getItemData(id) {
      this.isLoading = true;
      getNotice(id).then(res => {
        let o = res.msg;
        //this.obj = o;

        //赋值
        if (o.type == 1) {
          this.detail = o.content;
        } else if (o.type == 2) {
          this.link = o.content;
        }
        this.obj = Object.assign({}, o);
      });
    },
    //获取图片
    // getImage(val) {
    //   this.obj.business_license = val;
    // },

    //保存数据
    saveData() {
      let that = this;
      let _data = Object.assign({}, this.obj);
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          //处理content
          if (_data.type == 1) {
            _data.content = this.detail;
          } else if (_data.type == 2) {
            _data.content = JSON.stringify(this.linkdata);
          }

          //判断content
          if (!_data.content) {
            this.$alert('公告内容或链接不得同时为空!');
            return false;
          }

          //保存数据
          this.isLoading = true;
          switch (this.pageIsEdit) {
            case 0:
              //新增
              addNotice(_data)
                .then(res => {
                  this.$refs.ufrom.init();
                  //this.$refs.shForm.resetFields();
                  //this.obj = Object.assign({},this._obj);
                  this.$router.push('/setting/shop/announcement');
                })
                .catch(e => {
                  this.$refs.ufrom.init();
                });
              break;
            case 1:
              //编辑
              //删除字段
              delete _data.status_text;
              editNotice(_data)
                .then(res => {
                  this.$refs.ufrom.init();
                  //this.getItemData(this.$route.query.id);
                  this.$router.push('/setting/shop/announcement');
                })
                .catch(e => {
                  this.$refs.ufrom.init();
                });
              break;
            default:
              //no code
              break;
          }
        } else {
          this.$refs.ufrom.init();
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
